[오종택]sprint1 #29
[오종택]sprint1 #29
Conversation
ohjongteak
added
매운맛🔥
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
종택님 고생 많으셨습니다~!
기본적인 UI 구성은 어느정도 구현된 거 같습니다. 다만 html/css 대신 이미지로 대체된 부분들, 시맨틱 태그가 아쉽습니다!
다시 한 번 html/css 관련 개념들을 차근차근 짚어보시면 좋을 거 같아요 :)
| @@ -0,0 +1,82 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> |
There was a problem hiding this comment.
main, header 등 시맨틱 태그에 좀 더 신경써주세요 :)
| <body> | ||
| <div class="container"> | ||
| <div class="top_container"> | ||
| <img src="image/logo.png" class="logo"> |
There was a problem hiding this comment.
img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!
| </div> | ||
|
|
||
| <div class="layout_image"> | ||
| <img src="image/desktop_02.png"> |
There was a problem hiding this comment.
텍스트 영역까지 이미지로 사용하셨군요..!
피그마를 보시면 해당 부분은 텍스트 영역과 이미지 영역이 구분되어 있습니다!
물론 급하게 작업해야하거나 간단하게 표현할 경우 지금 처럼 구현하는 것도 가능합니다 :)
하지만 HTML요소를 전부 이미지로 표현하면 몇 가지 문제점이 있습니다.
SEO
HTML의 텍스트는 검색 엔진 최적화(SEO)에 중요한 역할을 합니다. 이미지로 넣으면 검색 엔진이 내용을 인식하지 못해 사이트 SEO에 불리합니다!
접근성
이미지는 스크린리더가 읽을 수가 없어 접근성이 많이 떨어집니다.
유지보수성
만약 현재 상황에서 텍스트 색상 변경 요청이 들어오면 어떻게 될까요? 원래라면 css 한 줄만 수정하면 되겠지만, 지금의 경우 모든 이미지를 교체하게 되겠죠! 화면 크기에 따른 반응형 구현도 더 까다롭고 부자연스러워집니다!
성능
이미지는 HTML tag보다 로딩 속도에 더 많은 영향을 줍니다!
무엇보다 현재는 학습과정이므로 HTML로 직접 구현해보시는 것을 추천드려요 :)
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="top_container"> |
| <div class="layout_image"> | ||
| <img src="image/desktop_05.png"> | ||
| </div> | ||
| <footer> |
| <a href="/faq.html"> | ||
| FAQ | ||
| </a> | ||
| </div style="display: flex"> |
There was a problem hiding this comment.
closing tag에는 속성을 넣지 않습니다!
| @codeit - 2024 | ||
| </div> | ||
|
|
||
| <div style="display:flex; gap: 24px;"> |
There was a problem hiding this comment.
inline style은 일관성이 떨어지고 유지 보수에 좋지 않아 지양하시는 것이 좋습니다~! :)
| <img src="image/desktop_02.png"> | ||
| </div> | ||
|
|
||
| <div class="layout_image"> |
There was a problem hiding this comment.
공통 스타일을 위한 클래스를 사용하셨네요! 👍
2 participants
요구사항
기본
[O]랜딩 페이지의 url path는 루트('/')로 설정합니다.
[O]title은 "판다마켓"로 설정합니다.
[O]화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
[O]화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
[O]클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
[O]"판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
[O]'로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
[O]"구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
[O]"Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
[O]페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
주요 변경사항
[X]사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
스크린샷
https://celebrated-dango-152652.netlify.app/
멘토에게